<template>
	<view class="">
		<view class="card" :class="{ mt20: Idx > 0 }" v-for="(shop, Idx) in list" :key="Idx">
			<view class="seller flex align-center u-border-bottom">
				<mycheckbox :state="shop.checked" @handChange="handAllChange" :index="Idx"></mycheckbox>
				<view class="ml24 imgbox" @tap="navToshop(shop)"><image :src="`${shop.supplier_img}?imageView2/0/w/140`" mode="widthFix"></image></view>
				<text class="shop-name" @tap="navToshop(shop)">{{ shop.supplier_name }}</text>
				<image class="arrow" @tap="navToshop(shop)" :src="`${assetsPath}/right.png`" mode="widthFix"></image>
			</view>
			<view class="flex align-center c-item" v-for="(item, index) in shop.data" :key="index">
				<mycheckbox :state="item.checked" @handChange="e => handChange(e, index, Idx)"></mycheckbox>
				<view class="flex-sub ml24">
					<goods-item
						:info="item"
						:index="index"
						:imgWidth="imgWidth"
						:imgheight="imgWidth"
						:showFav="false"
						pd="0"
						mt="0"
						@changeNum="e => changeNum(e, Idx)"
					></goods-item>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import mycheckbox from '@/components/mycheckbox';
import goodsItem from '@/components/goods-item';
export default {
	data() {
		return {
			imgWidth: uni.upx2px(160) + 'px'
		};
	},
	components: { mycheckbox, goodsItem },
	props: {
		list: {
			type: Array,
			default: () => []
		}
	},
	methods: {
		handAllChange(e) {
			this.$emit('changeAll', e);
		},
		handChange(e, index, idx) {
			this.$emit('changeOne', {
				...e,
				index,
				idx
			});
		},
		changeNum(e, idx) {
			this.$emit('changeNum', {
				...e,
				idx
			});
		},
		navToshop(shop) {
			this.$Router.push({
				path: '/pages/shop/shop?id=' + shop.supplier_id
			});
		}
	}
};
</script>

<style lang="scss">
.c-item {
	padding: 24upx;
}
.seller {
	margin: 0 17upx;
	padding: 24upx 11upx;
	.imgbox {
		width: 62upx;
		height: 62upx;
		border-radius: 100%;
		overflow: hidden;
		image {
			width: 62upx;
			height: 62upx;
		}
	}
	.arrow {
		width: 28upx;
		height: 28upx;
		margin-left: 12upx;
	}
	.shop-name {
		margin-left: 13upx;
		color: $u-main-color;
		font-weight: 500;
	}
}
</style>
